<template>
  <div>
    <div>
      <el-radio-group v-model="value.isShowLengthLimit" @change="update" :disabled="isDisabled">
        <el-radio label="false">否</el-radio>
        <el-radio label="true">是</el-radio>
      </el-radio-group>
    </div>
    <div class="range" v-if="isShow">
      <div class="inpNumer">
        <el-input-number v-model="value.min" :min="1" controls-position="right" @change="minchange" />
        -
        <el-input-number v-model="value.max" :min='2' :max="9999" controls-position="right" @change="maxchange" />
      </div>

      <el-tooltip :content="content" placement="bottom" effect="light">
        <el-icon :size="20" color="#a1a1a1">
          <Warning />
        </el-icon>
      </el-tooltip>

    </div>
  </div>
</template>

<script setup>
import { computed, ref, watch, watchEffect } from 'vue'
const emit = defineEmits(['update:modelValue'])
const props = defineProps({
  modelValue: {
    type: Object,
    default: {
      isShowLengthLimit: 'false',
      min: 0,
      max: 100
    }
  },
  disabled: {
    type: Boolean,
    default: true
  }
})

const content = ref('长度限制最长为9999!')
const value = ref({
  isShowLengthLimit: 'false',
  min: 1,
  max: 100
})
const minchange = (e) => {
  if (e >= value.value.max) {
    value.value.min = value.value.max - 1
  } else if (!e) {
    value.value.min = 1
  }
  console.log('%c [  ]-21', 'font-size:13px; background:pink; color:#bf2c9f;', e)
  update()

}
const maxchange = (e) => {
  const min = value.value.min
  if (e <= min) {
    value.value.max = min + 1
  } else if (!e) {
    value.value.max = 100

  }
  console.log('%c [  ]-21', 'font-size:13px; background:pink; color:#bf2c9f;', e)
  update()
}
const update = () => {
  emit('update:modelValue', value.value)
}


const isShow = computed(() => value.value.isShowLengthLimit === 'true')
const isDisabled = computed(() => props.disabled)

watch(() => props.modelValue, (val) => {
  value.value = val
}, {
  deep: true,
  immediate: true
})



</script>

<style lang="scss" scoped>
:deep(.el-input-number) {
  width: 100px;
}

.radio {
  display: block;
}

.range {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .inpNumber {
    display: flex;
    justify-content: space-between;
  }

  :deep(.el-icon) {
    align-self: center;
    margin-left: 10px;
  }
}
</style>